<template>
	<view class="content">

		<view class="header">
			<view style="width: 50px;height: 100%;display:flex;align-items: center;justify-content: center;"
				@click="showDrawer">
				<uni-icons type="bars" size="30" color="white"></uni-icons>
			</view>

			<view style="display:flex;flex:1;justify-content: center;">
				<text>{{title}}</text>
			</view>
			<view style="width: 50px;height: 100%;display:flex;align-items: center;justify-content: center;"
				@click="goback">
				<uni-icons type="undo-filled" size="30" color="white"></uni-icons>
			</view>

		</view>
		<view class="nodata-bg" v-if="scbList.length==0">
			<text>无设备</text>
		</view>
		<uni-card style="width: 90vw;background-color: #1d1e1f;color:#fff;border-color: #3c3c3c;margin-bottom: 0 ;"
			v-for="item in scbList" :key="item.id">
			<template v-slot:title>
				<view style="margin-top: 1vh;display: flex;justify-content: space-between;">
					<text>{{item.name}}</text>
					<view>
						<!-- <uni-tag text="在" type="success" v-if="item.cus_lost" size="small" circle></uni-tag> -->
						<uni-tooltip :content="item.last_seen" placement="bottom">
							<uni-tag text="离" type="error" v-if="!item.cus_lost" circle></uni-tag>
						</uni-tooltip>
					</view>
				</view>
			</template>
			<view style="display: flex;color: white;">
				<text style="flex:1">线路ID：{{item.id}}</text>
				<view>
					<text>类型：</text>
					<uni-tag text="三相" type="primary" v-if="item.lineType == '380'" size="small" circle></uni-tag>
					<uni-tag text="单相" custom-style="background-color: #E066FF ; border-color: #E066FF; color: #fff;"
						v-else-if="item.lineType == '220'" size="small" circle></uni-tag>
				</view>
			</view>
			<view style="display: flex;;color: white;">

				<view style="flex:1;">
					<text style="flex:1">累计电量：{{ item.power }} Kw·h</text>
				</view>
				<view>
					<text>状态：</text>
					<uni-tag text="合闸" type="success" v-if="item.OpenClose" size="small" circle></uni-tag>
					<uni-tag text="关闸" type="error" v-else circle></uni-tag>
				</view>

			</view>
			<view style=" display: flex;;color: white;">

				<text style="flex:1" @click="openChartsPop(item,'G_WP')">
					功率：{{ item.lineType == '380' ? item.G_WP : item.A_WP }} W
				</text>
				<view>
					<text>远程：</text>
					<uni-tag text="允许" type="success" v-if="item.EnableNetCtrl" size="small" circle></uni-tag>
					<uni-tag text="禁止" type="error" v-else size="small" circle></uni-tag>
				</view>

			</view>

			<view style="display: flex;;color: white;">

				<view style="flex:1;">

					<text style="flex:1" @click="openChartsPop(item,'A_T')">
						温度：{{ item.lineType == '380' ? item.G_T : item.A_T }} ℃
					</text>
				</view>

				<text style="flex:1" @click="openChartsPop(item,'A_A')">
					电流：{{ item.lineType == '380' ? item.G_A : item.A_A }} A
				</text>
			</view>

			<view style="display: flex;;color: white;">
				<view style="flex:1;">
					<text style="flex:1" @click="openChartsPop(item,'G_LD')">
						漏电流：{{ item.lineType == '380' ? item.G_LD : item.A_LD }} mA
					</text>
				</view>
				<text style="flex:1" @click="openChartsPop(item,'A_V')">
					电压：{{ item.lineType == '380' ? item.G_V : item.A_V }} V
				</text>
			</view>

		</uni-card>

		<uni-drawer ref="showLeft" mode="left" :width='250'>
			<scroll-view style="height: 100%;" scroll-y="true">
				<tree :close="closeDrawer" />
			</scroll-view>
		</uni-drawer>

		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view style="background-color: #1d1e1f;color:white;padding: 1vh 1vw;">
				<view style="margin: 10px;color:white">
					<view style="display: flex;align-items: center;">
						<text style="padding-left: 1vw;">开始时间：</text>
						<uni-datetime-picker type="datetime" v-model="timeStart" @change="changeTime" />
					</view>
					<view style="height: 1vh;background-color:#1d1e1f;"></view>
					<view style="display: flex;align-items: center;">
						<text style="padding-left: 1vw;">结束时间：</text>
						<uni-datetime-picker type="datetime" v-model="timeEnd" @change="changeTime" />
					</view>

				</view>

				<view class="charts-box">
					<qiun-data-charts :chartData="chartData" type="line" :opts="opts" tooltipFormat="tooltipDemo1" />
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		defineComponent,
		ref
	} from 'vue'
	import dayjs from 'dayjs'
	import Tree from '@/components/mine/tree.vue'
	import apiPath from '@/common/apiPath.js'
	import request from '@/common/callApi.js'
	export default {
		components: {
			'tree': Tree
		},
		data() {
			return {
				title: '',
				scbList: [],
				chartData: {},
				timeStart: '',
				timeEnd: '',
				currentScb: {},
				currentChartsType: 'G_WP',
				opts: {
					fontColor: '#fff',
					color: ["#FAC858", "#91CB74", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						disabled: true,
					},
					dataLabel: false,
					yAxis: {
						// gridType: "dash",
						// dashLength: 2
					},
					extra: {
						// line: {
						// 	type: "straight",
						// 	width: 2,
						// 	activeType: "hollow"
						// }
					},
				}
			}
		},
		onLoad() {
			this.timeStart = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
			this.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
			// this.fetchNodes(10)
		},
		mounted() {
			this.showDrawer()
		},
		methods: {
			showDrawer() {
				this.$refs.showLeft.open();
			},
			goback() {
				// #ifdef WEB
				window.location.href = "https://ny.moutai.com.cn/static/phone2/#/pages/tabBar/Home/Home"
				// #endif
			},
			closeDrawer(item) {
				this.title = item.name
				this.$refs.showLeft.close();
				this.fetchNodes(item.id)
			},
			changeTime() {
				let start = this.timeStart
				let end = this.timeEnd
				if (start && end) {
					if (dayjs(start).isAfter(dayjs(end))) {
						this.getServerData(this.currentScb, this.currentChartsType, end, start);
						return
					}
					this.getServerData(this.currentScb, this.currentChartsType, start, end);
				}
			},
			async fetchNodes(id) {
				let params = {
					node_id: id
				}
				const {
					data
				} = await request(apiPath.scbs, params, 'GET')
				let deviceListData = []
				const list = data.list
				for (var i = 0; i < list.length; i++) {
					const item = list[i]
					let params = {
						id: item.id
					}
					const status = await request(apiPath.scbStatus, params, 'GET')
					const breakers = status.data.breakers
					const last_seen = status.data.last_seen
					let time = dayjs(last_seen)
					let time2 = dayjs().subtract(5, 'minute')
					//自定义5分钟是否掉线
					const cus_lost = dayjs(time2).isBefore(time)
					if (breakers == null) {
						continue
					}
					let finalData = {
						...item,
						...breakers,
						cus_lost,
						last_seen,
					}
					deviceListData.push(finalData)
				}
				this.scbList = deviceListData
			},
			openChartsPop(item, point) {
				this.currentScb = item
				this.currentChartsType = point
				this.getServerData(item, point, this.timeStart, this.timeEnd);
				this.$refs.popup.open()
			},
			async getServerData(item, point, start, end) {
				this.chartData = JSON.parse(JSON.stringify({}));
				let params = {
					device: item.id,
					point: point,
					begin: start,
					end: end
				}
				let x = []
				let aa = []
				let at = []
				let av = []

				let ba = []
				let bt = []
				let bv = []

				let ca = []
				let ct = []
				let cv = []

				let gwp = []
				let gld = []

				const {
					data
				} = await request(apiPath.scbTs, params, 'GET')
				const series = data.series
				for (let i = 0; i < series.length; i++) {
					const item = series[i]
					let time = item.time
					x.push(time)
					let value = item.value == null ? 0 : item.value
					if (point == 'A_A') {
						aa.push(value)
					} else if (point == 'A_T') {
						at.push(value)
					} else if (point == 'A_V') {
						av.push(value)
					} else if (point == 'B_A') {
						ba.push(value)
					} else if (point == 'B_T') {
						bt.push(value)
					} else if (point == 'B_V') {
						bv.push(value)
					} else if (point == 'C_A') {
						ca.push(value)
					} else if (point == 'C_T') {
						ct.push(value)
					} else if (point == 'C_V') {
						cv.push(value)
					} else if (point == 'G_WP') {
						gwp.push(value)
					} else if (point == 'G_LD') {
						gld.push(value)
					}
				}
				let option = {
					categories: x,
					series: []
				}
				if (point == 'G_WP') {
					option.series[0] = {
						name: "功率(W)",
						data: gwp,
					}

				} else if (point == 'G_LD') {
					option.series[0] = {
						name: "漏电流(mA)",
						data: gld
					}

				} else if (point == 'A_T') {
					option.series = [{
						name: "温度(℃)",
						data: at
					}]
					if (item.lineType == '380') {
						let params = {
							device: item.id,
							point: "B_T",
							begin: start,
							end: end
						}
						const {
							data: dataB
						} = await request(apiPath.scbTs, params, 'GET')
						const seriesB = dataB.series
						for (let i = 0; i < seriesB.length; i++) {
							const item = seriesB[i]
							let value = item.value == null ? 0 : item.value
							bt.push(value)
						}
						params.point = "C_T"
						const {
							data: dataC
						} = await request(apiPath.scbTs, params, 'GET')
						const seriesC = dataC.series
						for (let i = 0; i < seriesC.length; i++) {
							const item = seriesC[i]
							let value = item.value == null ? 0 : item.value
							ct.push(value)
						}
						option.series = [{
							name: "A相(℃)",
							data: at
						}, {
							name: "B相(℃)",
							data: bt
						}, {
							name: "C相(℃)",
							data: ct
						}]
					}

				} else if (point == 'A_A') {
					option.series = [{
						name: "电流(A)",
						data: aa
					}]
					if (item.lineType == '380') {
						let params = {
							device: item.id,
							point: "B_A",
							begin: start,
							end: end
						}
						const {
							data: dataB
						} = await request(apiPath.scbTs, params, 'GET')
						const seriesB = dataB.series
						for (let i = 0; i < seriesB.length; i++) {
							const item = seriesB[i]
							let value = item.value == null ? 0 : item.value
							ba.push(value)
						}
						params.point = "C_A"
						const {
							data: dataC
						} = await request(apiPath.scbTs, params, 'GET')
						const seriesC = dataC.series
						for (let i = 0; i < seriesC.length; i++) {
							const item = seriesC[i]
							let value = item.value == null ? 0 : item.value
							ca.push(value)
						}
						option.series = [{
							name: "A相(A)",
							data: aa
						}, {
							name: "B相(A)",
							data: ba
						}, {
							name: "C相(A)",
							data: ca
						}]
					}

				}else if (point == 'A_V') {
					option.series = [{
						name: "电压(V)",
						data: av
					}]
					if (item.lineType == '380') {
						let params = {
							device: item.id,
							point: "B_V",
							begin: start,
							end: end
						}
						const {
							data: dataB
						} = await request(apiPath.scbTs, params, 'GET')
						const seriesB = dataB.series
						for (let i = 0; i < seriesB.length; i++) {
							const item = seriesB[i]
							let value = item.value == null ? 0 : item.value
							bv.push(value)
						}
						params.point = "C_V"
						const {
							data: dataC
						} = await request(apiPath.scbTs, params, 'GET')
						const seriesC = dataC.series
						for (let i = 0; i < seriesC.length; i++) {
							const item = seriesC[i]
							let value = item.value == null ? 0 : item.value
							cv.push(value)
						}
						option.series = [{
							name: "A相(V)",
							data: av
						}, {
							name: "B相(V)",
							data: bv
						}, {
							name: "C相(V)",
							data: cv
						}]
					}

				}

				this.chartData = JSON.parse(JSON.stringify(option));
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #232323;
	}

	.header {
		background-color: #1d1e1f;
		color: white;
		display: flex;
		width: 100vw;
		height: 50px;
		align-items: center;
	}

	.nodata-bg {
		height: 100vh;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #232323;
	}

	.charts-box {
		width: 100%;
		height: 300px;
		background-color: #232323;
	}
</style>